<!--
 * @Author: zhangmengqiong
 * @Date: 2021-09-09 18:11:06
 * @LastEditors: zhangmengqiong
 * @LastEditTime: 2021-11-16 13:50:00
-->
<template>
  <div class="box" id="container"></div>
</template>

<script>
import "echarts-liquidfill";
export default {
  data () {
    return {
    }
  },
  computed: {},
  mounted () {
    const chart = this.$echarts.init(document.getElementById("container"));
    chart.setOption({
      tooltip: {
        show: true
      },
      series: [
        {
          type: "liquidFill",
          data: [0.68], // 从大到小
          color: ["red"],
          radius: "80%", // 图表大小
          name: "支付转化率",
          emphasis: {
            itemStyle: {
              opacity: 0.9
            }
          },
          label: {
            fontSize: 28, // 调整字体显示
            color: "#999",
            insideColor: "white" // 当水波上去，改变字体颜色
          },
          outline: {
            borderDistance: 0,
            itemStyle: {
              borderWidth: 1,
              borderColor: "#aaa4a4",
              shadowBlur: 0,
              color: "none",
              shadowColor: "#fff"
            }
          },
          backgroundStyle: {
            color: "#fff" // 改变背景颜色
          },
          itemStyle: {
            shadowBlur: 0,
            shadowColor: "#fff"
          },
          amplitude: 8,
        }
      ]
    });
  },
  methods: {}
};
</script>
<style lang="scss" scoped>
.box {
  width: 100%;
  height: 100%;
}
</style>
